<template>
	<view>
		<map :latitude="latitude" :longitude="longitude" id="map" ref="map" :markers="markers"
			@regionchange='regionchange' style="width: 100%; height: 100vh;"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longitude: '',
				latitude: '',
				// 地图中心标记点
				// markers: [{
				//   id: 0, // 使用 marker点击事件 需要填写id
				//   latitude: 0,
				//   longitude: 0,
				//   iconPath: 'https://bpic.51yuansu.com/pic3/cover/00/77/39/58c6caf1c78e3_610.jpg',
				//   // 设置markers的宽高
				//   width: 30,
				//   height: 40,
				// }],
				markers: [{
					id: 0,
					latitude: 0,
					longitude: 0,
					width: 25,
					height: 35,
					callout: { // 气泡
						content: "定位点",
						// bgColor: "rgba(255,255,255,0.51)",
						color: "#F56C6C",
						fontSize: 12,
						padding: 5,
						display: "ALWAYS",
						borderColor: "#F56C6C",
					},
				}],
			}
		},

		onLoad() {
			this.getlocation()
		},

		methods: {
			getlocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.longitude = res.longitude
						this.latitude = res.latitude
						// 调用后端接口根据得到的经纬度获取地址
						console.log(res, "根据经纬度获取地址");
					},
					// 若用户点击拒绝获取位置则弹出提示
					fail: (err) => {
						uni.showModal({
							content: '检测到您没打开获取位置功能权限，是否去设置打开？',
							confirmText: "确认",
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											uni.showToast({
												title: '授权后请重新打开此页面',
												icon: 'none'
											})
										},
										fail: (err) => {
											console.log(err)
										}
									})
								} else {
									uni.showToast({
										title: '获取地理位置授权失败',
										icon: 'none',
										success: () => {
											// 返回上一页
											setTimeout(() => {
												uni.showToast({
													title: "返回上一页",
													icon: 'none'
												})
												// uni.navigateBack({
												// delta: 1
												// })
											}, 500)
										}
									})
								}
							}
						})
					},
				})
			},


			regionchange(e) {
				// 更新当前搜索周边的经纬度
				if (e.type == 'end') {
					console.log(e, "拖动后的经纬度");
					// 需要获取地图中心的经纬度 否则无法确定唯一经纬度
					this.getCenterLanLat()
				}
			},

			// 获取当前地图中心的经纬度
			getCenterLanLat() {
				uni.createMapContext("map", this).getCenterLocation({
					type: 'gcj02',
					success: (res) => {
						console.log("地图中心点经纬度：", res);
						// 把当前经纬度设置给标记点
						this.markers[0].latitude = res.latitude
						this.markers[0].longitude = res.longitude
					},
					fail: (err) => {}
				})
			},
	
		}
	}
</script>

<style>

</style>